<!-- 侧边栏 -->
<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        background-color="#313437"
        text-color="#fff"
        active-text-color="#0ab09a"
      >
        <!-- 一级菜单 -->
        <template v-for="(item, index) in menu">
          <router-link
            :key="index"
            v-if="!item.children"
            :to="'/layout/' + item.path"
          >
            <el-menu-item :index="item.path">
              <i :class="item.meta.icon"></i>
              <span slot="title">{{ item.meta.title }}</span>
            </el-menu-item>
          </router-link>
          <!-- 一级菜单 -->
          <!-- index属性必须保证唯一性 -->
          <el-submenu :index="item.path" v-else :key="item.id">
            <template slot="title">
              <i :class="item.meta.icon"></i>
              <span>{{ item.meta.title }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item-group>
              <router-link
                v-for="item1 in item.children"
                :key="item1.name"
                :to="'/layout/' + item.path + '/' + item1.path"
              >
                <el-menu-item index="1-1"
                  ><i :class="item1.meta.icon"></i
                  ><span>{{ item1.meta.title }}</span></el-menu-item
                >
              </router-link>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
// 引入 eventBus
import eventBus from "@/utils/eventBus.js";
export default {
  name: "",
  props: [""],
  data() {
    return {
      menu: [], //菜单
      isCollapse: false,
    };
  },

  components: {},

  computed: {},

  created() {
    // 从vuex中获取state中的routes全局变量
    // console.log(33, this.$store.state.routes);
    this.menu = this.$store.state.routes[1].children;
    // console.log(this.menu);
    // 接收从兄弟组件面包屑组件传来的参数
    eventBus.$on("transfer", (m) => {
      // console.log(m);
      this.isCollapse = m;
    });
  },

  mounted() {},

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
